<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/three_columns_menu_search_selltag.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>二手易</title>
<!-- InstanceEndEditable -->
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />

<script language="javascript">
function refresh(f){
var cap = document.getElementById(f);
cap.innerHTML = "<img src='cimage?a=" + Math.random() + "'/>";
}


var req;

function upload() {
    //alert("hi submit item");
                var url = "ImageUploadServlet";
        
                if (window.XMLHttpRequest) // Non-IE browsers
                { 
                    //alert("nonIE");
                    req = new XMLHttpRequest();
                    req.onreadystatechange = uploadStateChange;

                    try 
                    {
                        req.open("GET", url, true);
                    } 
                    catch (e) 
                    {
                        alert(e);
                    }
                    req.send(null);
                } 
                else if (window.ActiveXObject) // IE Browsers
                { 
                    req = new ActiveXObject("Microsoft.XMLHTTP");
        
                    if (req) 
                    {
                        req.onreadystatechange = processStateChange;
                        req.open("GET", url, true);
                        req.send();
                    }
                }
}

 function uploadStateChange()
            {                
                if (req.readyState == 4)
                {
                    if (req.status == 200) // OK response
                    {                       
                        var xml = req.responseXML;
                        
                        // No need to iterate since there will only be one set of lines
                        var isNotFinished = xml.getElementsByTagName("finished")[0];
                        var myBytesRead = xml.getElementsByTagName("read")[0];
                        var myContentLength = xml.getElementsByTagName("length")[0];
                        var myPercent = xml.getElementsByTagName("percent")[0];
                        
                        // Check to see if it's even started yet
                        if ((isNotFinished == null) && (myPercent == null))
                        {   
                            //alert("initalizing");
                            document.getElementById("initializing").style.visibility = "visible";

                            // Sleep then call the function again
                            window.setTimeout("upload();", 100);
                        }
                        else 
                        {
                            //alert("start");
                            document.getElementById("initializing").style.visibility = "hidden";
                            document.getElementById("progressBarTable").style.visibility = "visible";
                            document.getElementById("percentCompleteTable").style.visibility = "visible";
                            document.getElementById("bytesRead").style.visibility = "visible";

                            myBytesRead = myBytesRead.firstChild.data;
                            myContentLength = myContentLength.firstChild.data;
                            
                            //alert(myBytesRead);
                            //alert(myContentLength);
                            
                            if (myPercent != null) // It's started, get the status of the upload
                            {
                                myPercent = myPercent.firstChild.data;
                                //alert(myPercent);
                                document.getElementById("progressBar").style.width = myPercent + "%";
                                document.getElementById("bytesRead").innerHTML = myBytesRead + " of " + 
                                    myContentLength + " bytes read";
                                document.getElementById("percentComplete").innerHTML = myPercent + "%";
        
                                // Sleep then call the function again
                                window.setTimeout("upload();", 100);
                            }
                             else
                            {
                                document.getElementById("bytesRead").style.visibility = "hidden";
                                document.getElementById("progressBar").style.width = "100%";
                                document.getElementById("percentComplete").innerHTML = "Done!";
                            }
                    }
                }
            }
            }
</script>

<!--lightbox 1-->
<link rel="stylesheet" href="css/lightbox1.css" type="text/css" />
<script src="Scripts/prototype.js" type="text/javascript"></script>
<script src="Scripts/lightbox1.js" type="text/javascript"></script>

<%!
private String compare(String s1, String s2){
        if(s1.equals(s2)) return "selected='selected'";
		else return "";
		}
%>
<%
String msg = request.getParameter("msg");
String minRating = (String)session.getAttribute("minRating");
String condition = (String)session.getAttribute("condition");
%>
<!-- InstanceEndEditable -->
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css/jquery-1.2.6.js"></script>
<script src="Scripts/nudge.js" type="text/javascript"></script>



</head>
<body>
<div class="main">
  <div class="header">
    <div class="header-top">
    
      <div class="login-bg">
      <a href="login.jsp" class="black-link">登入</a><span class="style3"> |</span>
      <a href="#" class="black-link">買賣須知</a><span class="style3"> |</span>
      <a href="#" class="black-link">聯絡我們</a> <span class="style3">|</span>
      <a href="#" class="black-link">關於2HE</a>
      
      </div>
    </div>
    <div class="header-bottom">
      <div id="navcontainer">
        <ul class="navlist">
          <li class=""><a href="index.jsp">首頁</a></li>
          <li class=""><a href="#">要買</a></li>
          <li class="active"><a href="AddItem.jsp?go=AddItem.jsp">要賣</a></li>
          <li class=""><a href="changeInfo.jsp?go=changeInfo.jsp">我的主頁</a></li>
          <li class=""><a href="#">我的信箱</a></li>
        </ul>
      </div>
      <!-- InstanceBeginEditable name="DoNotEdit" --><!-- InstanceEndEditable -->
      </div>
  </div>
  <div class="body-main">
    <div class="body-leftbar">
      <div class="left-boxbar">
      
        <div class="title-back">
          <div class="advance-search-box">
            <form action="SearchServlet" method="post">
              <table>
                <tbody>
                  <tr>
                    <td width="140" align="center"><select name="category" id="category">
                        <option value="99999" selected="selected">所有類別&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                        <option value="1000">書籍 </option>
                        <option value="2000">遊戲 </option>
                        <option value="3000">電影碟 </option>
                        <option value="4000">音樂 </option>
                        <option value="5000">電子產品 </option>
                        <option value="6000">影音器材 </option>
                        <option value="7000">電腦週邊 </option>
                        <option value="8000" >玩具精品</option>
                        <option value="9000">代用卷</option>
                        <option value="10000">飾物</option>
                        <option value="11000" >服裝</option>
                        <option value="12000">手袋/銀包</option>
                        <option value="13000">其他</option>
                      </select></td>
                  </tr>
                  <tr>
                    <td align="center"><span id="sSearch">
                      <input type="text" name="searchItem" id="searchItem" size="15"/>
                      <span class="textfieldRequiredMsg"></span></span></td>
                  </tr>
                  <tr>
                    <td align="center"><input type='image' src='images/search-bt.jpg'/></td>
                  </tr>
                </tbody>
              </table>
            </form>
          </div>
          <br/>
          <div class="title-back">
            <div id="menu-box">
              <table align="center">
                <tbody>
                  <tr>
                    <td><img src="images/menu_icon_book.gif" width="30" height="30" /></td>
                    <td  class="menu-style" width="90"><a href="search.jsp?cat=1000" class="nudge"> 書藉</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_game.gif" width="30" height="30"/></td>
                    <td  class="menu-style"><a href="search.jsp?cat=2000" class="nudge">遊戲</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_video.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=3000" class="nudge">電影</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_music.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=4000" class="nudge">音樂</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_electric.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=5000" class="nudge">電子產品</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_av.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=6000" class="nudge">影音器材</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_computer.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=7000" class="nudge">電腦週邊</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_toy.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=8000" class="nudge">玩具精品</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_coupon.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=9000" class="nudge">代用卷</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_ornament.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=10000" class="nudge">飾物</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_clothes.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=11000" class="nudge">服裝</a></td>
                  </tr>
                  <tr>
                    <td><img src="images/menu_icon_bag.gif" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=12000" class="nudge">手袋/銀包</a></td>
                  </tr>
                  
                  <tr>
                    <td><img src="images/icon_no_photo.jpg" width="30" height="30" /></td>
                    <td  class="menu-style"><a href="search.jsp?cat=13000" class="nudge">其他</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!-- InstanceBeginEditable name="DoNotEditToo" --><!-- InstanceEndEditable -->
      </div>
    </div>
    <div class="padding-left">
    <div class="body-mediumbar">
      <div class="medium-boxbar">
      <!-- InstanceBeginEditable name="mediumcolumn" -->
          <div class="title-back">
            <div class="add-item-box">
              <div class="centering"> <span class="red-star">*</span>&nbsp;為必須填寫
                <div class="error-style">
                  <%if ("cap_error".equals(msg)) {%>
                  <h3>請輸入正確之驗證碼</h3>
                  <%}else if("necessary_empty_error".equals(msg)) { %>
                  <h3>請填寫<span class="red-star">*</span>&nbsp;的資料</h3>
                  <%}else if("edition_error".equals(msg)) { %>
                  <h3>版本格式不符</h3>
                  <%}else if("money_error".equals(msg)) {%>
                  <h3>價錢格式不符</h3>
                  <%}else if("quantity_error".equals(msg)) {%>
                  <h3>數量格式不符</h3>
                  <%}else if("condition_error".equals(msg)) {%>
                  <h3>請選擇正確的新淨度</h3>
                  <%}else if("year_error".equals(msg)) { %>
                  <h3>年份格式不符</h3>
                  <%}else if("minRating_error".equals(msg)) { %>
                  <h3>最低資格格式不符</h3>
                  <%}else if("invalid_file_size".equals(msg)) { %>
                  <h3>圖片大少 ${param.file_name} 不符合</h3>
                  <%}%>
                </div>
                <form action="AddBookServlet" method="post" enctype="multipart/form-data">
                  <fieldset>
                  <legend class="gray-color">1. 基本資料<span class="red-star">*</span>
                  </legend>
                  <table class="table-font-12">
                    <tbody valign="top">
                      <tr>
                        <td width="130">物品類別:<span class="red-star">*</span></td>
                        <td width="350"><select name="category" id="category" onchange="changePanel(this)">
                            <option value="pleaseSelect">請選擇... </option>
                            <option value="book" >書籍 </option>
                            <option value="game">遊戲光碟 </option>
                            <option value="video">電影光碟 </option>
                            <option value="audio">音樂光碟 </option>
                            <option value="comic">漫畫</option>
                            <option value="toy">玩具精品</option>
                            <option value="coupon">代用卷</option>
                            <option value="other">其他</option>
                          </select>
                          <br/>&nbsp;
                        </td>
                      </tr>
                      <tr>
                        <td>名稱:<span class="red-star">*</span></td>
                        <td ><span id="sBookName">
                          <input type="text" name="bookname" id="bookname" value="${bookName}"/>
                          <span class="textfieldRequiredMsg">請填寫</span></span><br/>
                          <span class="hint-font-10">(請填寫書籍名稱)</span></td>
                      </tr>
                      <tr>
                        <td>新淨度:<span class="red-star">*</span></td>
                        <td><span id="sBookCondition">
                          <select name="itemCondition" id="itemCondition">
                            <option value="-99999" selected="selected" <%=compare("-99999",condition)%>>請選擇</option>
                            <option value="0" <%=compare("0",condition)%>>全新</option>
                            <option value="7" <%=compare("7",condition)%>>使用不到一週</option>
                            <option value="30" <%=compare("30",condition)%>>使用不滿一個月</option>
                            <option value="90" <%=compare("90",condition)%>>使用一到三個月</option>
                            <option value="182" <%=compare("182",condition)%>>使用未滿半年</option>
                            <option value="365" <%=compare("365",condition)%>>使用未滿一年</option>
                            <option value="670" <%=compare("670",condition)%>>使用一到二年</option>
                            <option value="1035" <%=compare("1035",condition)%>>使用二到三年</option>
                            <option value="99999" <%=compare("99999",condition)%>>使用三年以上</option>
                          </select>
                          <span class="selectInvalidMsg">請選取有效的項目。</span> <span class="selectRequiredMsg">請選取項目。</span></span><br/>
                          &nbsp;</td>
                      </tr>
                      <tr>
                        <td>數量:<span class="red-star">*</span></td>
                        <td><span id="sBookQuantity">
                          <input type="text" name="quantity" id="quantity" value="<%=session.getAttribute("quantity")==null?"1":session.getAttribute("quantity")%>"/>
                          <span class="textfieldRequiredMsg">請填寫。</span><span class="textfieldInvalidFormatMsg">格式無效。</span></span><br/>
                          <span class="hint-font-10">(請輪入每件售賣物的數量, 必須為正整數)</span></td>
                      </tr>
                      <tr>
                        <td> 價錢($HKD):<span class="red-star">*</span></td>
                        <td><span id="sBookPrice">
                          <input type="text" name="price" id="price" value="${price}"/>
                          <span class="textfieldRequiredMsg">請填寫。</span><span class="textfieldInvalidFormatMsg">格式無效。</span></span><br/>
                          <span class="hint-font-10">請輪入港幣數值</span> </td>
                      </tr>
                      <tr>
                        <td>關鍵字:<span class="red-star">*</span></td>
                        <td><span id="sBookTag1">
                          <input name="tags" type="text" id="tags" value="${tags}" size="50" maxlength="50"/>
                          <span class="textfieldRequiredMsg">請填寫最少一個關鍵字。</span></span><br/>
                          <span class="hint-font-10">(輸入 <b>1 至 5</b> 個描述物品的字詞。並且以逗號分隔。<br/>
                          例如:<br/>
                          作者名稱: 魯迅, Campbell Sean, 赤松健 <br/>
                          藝人名稱: 周迅, Twins, 容祖兒 <br/>
                          品牌名稱: levis, addidas, nike, sony, blizzard<br/>
                          書本分類: 數學, 漫畫, 教科書,小说, 搞笑, 治愈, 志类, 魔幻<br/>
                          語言: 英文, 中文, 日文<br/>
                          遊戲平台: xbox360, playstation2, nds, wii
                          </span> )</td>
                      </tr>
                      <tr>
                        <td>最低評級:<span class="red-star">*</span></td>
                        <td><select name="minRating" id="minRating">
                            <option value="-999999" selected="selected" <%=compare("-99999",minRating)%>>沒有</option>
                            <option value="-3" <%=compare("-1",minRating)%>>-3</option>
                            <option value="-2" <%=compare("-1",minRating)%>>-2</option>
                            <option value="-1" <%=compare("-1",minRating)%>>-1</option>
                            <option value="0" <%=compare("0",minRating)%>>0</option>
                            <option value="1" <%=compare("1",minRating)%>>1</option>
                            <option value="2" <%=compare("2",minRating)%>>2</option>
                            <option value="3" <%=compare("3",minRating)%>>3</option>
                            <option value="4" <%=compare("4",minRating)%>>4</option>
                            <option value="5" <%=compare("5",minRating)%>>5</option>
                            <option value="6" <%=compare("6",minRating)%>>6</option>
                            <option value="7" <%=compare("7",minRating)%>>7</option>
                            <option value="8" <%=compare("8",minRating)%>>8</option>
                            <option value="9" <%=compare("9",minRating)%>>9</option>
                            <option value="10" <%=compare("10",minRating)%>>10</option>
                          </select>
                          <br/>
                          <span class="hint-font-10">(此選項讓你決定合資格購買者的最低信用評級。如果你希望所有人也能購買你的物品，請把競投者最低評級設定為 <b>沒有</b> </span> )</td>
                      </tr>
                      <tr>
                        <td>驗證碼:<span class="red-star">*</span></td>
                        <td><span id="sbookcaptcha">
                          <input name="bookcaptchacode" type="text" id="bookcaptchacode" size="20" maxlength="4" />
                          <span class="textfieldRequiredMsg">請填寫。</span></span><br/>
                          <span class="hint-font-10">(輸入下圖顯示的驗證碼, 全部為細階</span> )</td>
                      </tr>
                      <tr>
                        <td colspan="2" align="center"><div id="cbookimageframe"><img src="cimage"/></div>
                          <br/>
                          <a href="javascript:void(0)" onclick="refresh('cbookimageframe')">看不清文字? 請按此</a> </td>
                      </tr>
                    </tbody>
                  </table>
                  </fieldset>
                  <br/>
                   <fieldset>
                  <legend class="gray-color">2. 上傳圖片使買家知道售賣物品狀態</legend>
                  <table class="table-font-12">
                    <tbody valign="top">
                      <tr>
                          <td colspan="2"> <a href="UploadImage.jsp" class="lbOn" border="0"><input type="button" value="上傳圖片"/></a> </td>
                      </tr>
                    </tbody>
                  </table>
                  </fieldset>
                  <br/>                  
                  <fieldset>
                  <legend class="gray-color">3. 填寫以下部份令買家更快搜尋到您的物品</legend>
                  <table class="table-font-12">
                    <tbody valign="top">                     
                      <tr>
                        <td width="130">物品介紹:</td>
                        <td width="350"><textarea name="itemDescription" cols="40" rows="7" id="itemDescription">${itemDescription}</textarea>
                          <br/>
                          <span class="hint-font-10">(簡單介紹物品:來源,出產地,保養,購入日期,出售原因等</span> )</td>
                      </tr>
                      <tr>
                        <td>喜好交易地區:</td>
                        <td><input type="text" name="tradeLocation" id="tradeLocation" value="${location}"/>
                          <br/>
                          <span class="hint-font-10">(提出方便您的交易地點</span> )</td>
                      </tr>
                    </tbody>
                  </table>
                  </fieldset>
                  <br/>                 
                  <table>
                    <tbody>
                      <tr>
                        <td width = "600" align="center"><input type='image' src='images/confirm-bt.gif' align="middle"/>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </form>
              </div>
            </div>
          </div>          
         
          
          <script type="text/javascript">
//todo; create instance only on panel selected to shorten the load time
</script>
          <!-- InstanceEndEditable -->
      </div>
    </div>
    <div class="body-rightbar2">
      <div class="right-boxbar2">
      
          <div class="title-back">
            <div class="new-item-box"></div>
            <br/>
            <div class="title-back">
              <div class="group-item-box"></div>
            </div>
            <!-- InstanceBeginEditable name="DoNotEdit3" --><!-- InstanceEndEditable --></div>
          <script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sSearch");
//-->
      </script>
          
      </div>
    </div>
    </div>
    </div>
  <div class="footer">Copyright&copy; <a href="http://www.2handeasy.com" class="footer-link">二手易</a> All rights reserved.  |  版權所有不得轉載</div>
</div>
</body>
<!-- InstanceEnd --></html>
